<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
		<script src="https://unpkg.com/mitt@3.0.0/dist/mitt.umd.js"></script><!-- CDN引入 -->
		<!-- <script src="js/mitt.umd.js"></script>本地引入 -->
		<title>eventBus实现组件通信</title>
		<!-- 209010238薛本莲 -->
		<style>
			.all{
				padding: 10px;
				height: 600px;
				background-color: aquamarine;
			}

			.son {
				margin-top: 30px;
				height: 440px;
				padding: 10px;
				background-color: darkcyan;
			}

			.grandSon {
				margin-top: 10px;
				height: 200px;
				padding: 20px;
				background-color: deepskyblue;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<!-- ***驼峰命名法——>肉串命名法 -->
			<!-- <grand-son></grand-son> -->
		</div>
		<!-- 方法2 -->
		<!-- <template id="sendGrandSon">
			<h1 class="father">爷标签</h1>
			<button @click='sendGrandSon'>发送</button>
			<son><grand-son></grand-son></son>
		</template> -->
	</body>
	<!-- 209010238薛本莲 -->
	<script>
		const emitter = window.mitt();
		const vm = Vue.createApp({
			// 给孙子发信息
			methods:{
				sendGrandSon(){
					// 用emit向指定对象，传送数据
					emitter.emit('grandSonEvent','点击给孙子发信息button，调用sendGrandSon函数，通过eventBus中的emit将数据传送给在eventBus注册过的孙子组件');
				}
			},
			// 方法2
			// template:`#sendGrandSon`,
			// 方法1
			template:`<div class="father">
						<h1>爷标签</h1>
						<button @click='sendGrandSon'>给孙子发信息</button>
						<son><grand-son></grand-son></son>
					 </div>`,
			// 组件
			components: {
				'son': {
					// 接收儿子信息
					data() {
						return {
							SonMessage: ''
						}
					},
					// 注册
					mounted() {
						// 用on进入群聊，在emit注册用户，才能收到信息
						emitter.on('SonEvent', e => {
							this.SonMessage = e;
						})
					},
					// 给儿子发信息
					methods: {
						sendToSon() {
							// 用emit向指定对象，传送数据
							emitter.emit('grandSonEvent', '同理可得');
						}
					},
					template: `<div class="son">
									<h2>父标签:{{SonMessage}}</h2>
									<button @click='sendToSon'>给儿子发信息</button>
									<slot></slot>
								</div>`,
				},
				'grandSon': {
					// 接收长辈发的信息
					data() {
						return {
							grandSonMessage: ''
						}
					},
					// 这里命名不能自定义
					// 有时不确定何时会触发事件，一般会在 mounted 或 created 钩子中来监听。
					mounted() {
						// 用on进入群聊，在emit注册用户，才能收到信息
						emitter.on('grandSonEvent', e => {
							this.grandSonMessage = e;
						})
					},
					// 给父亲发信息
					methods:{
						sendToFather() {
							emitter.emit('SonEvent', 'hi father');
						}
					},
					template: `<div class="grandSon">
									<h3>grandSon:{{grandSonMessage}}</h3>
									<button @click='sendToFather'>给父亲发信息</button>
							   </div>`,
				},
			}
		}).mount('.all');
	</script>
</html>